﻿<%@ Page Title="" Language="C#" MasterPageFile="~/User/UserMaster.master" AutoEventWireup="true" CodeFile="LendingTrend.aspx.cs" Inherits="User_LendingTrend" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
         <title>读者借阅走势图</title>
          <!-- Bootstrap Js必要 -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <script src="assets/js/jquery.metisMenu.js"></script>

    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
    <!-- 图表 -->
  
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

            <div id="page-wrapper" >
            <div id="page-inner">
			 <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            借阅走势<small>您可以在这里查询自己借书趋势</small>
                        </h1>
                      
                        <div class="breadcrumb" style="font-family:'Microsoft YaHei';">
                            
                            <asp:DropDownList CssClass="form-control" ID="years" style="width:200px; float:left;"  OnSelectedIndexChanged="years_SelectedIndexChanged" runat="server" AutoPostBack="True">
                                <asp:ListItem>2016</asp:ListItem>
                                <asp:ListItem>2014</asp:ListItem>
                                <asp:ListItem>2015</asp:ListItem>
                            </asp:DropDownList><span class="h2" style=" float:left;font-weight: 600;font-size: 27px;margin-top: 4px;font-family:FZBeiWeiKaiShu-S19S;color:#C0C712">&nbsp;&nbsp;年图书借阅走势图</span><h2></h2> <hr />
                            <br /><br />
                            <canvas id="myChart" width="957" height="388"></canvas>
                        
                        </div>
                    </div>
                </div> 
                 <!-- /. ROW  -->
			
				</div>
      
            </div>
    <script src="assets/js/Chart-1.0.1-beta.4.js"></script>
<script>

    var data = {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        datasets: [

            {
                lineItemName: "test2",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                data: [<%=linedata%>],
                
                
            }
        ]
    };
    options = {
        scaleFontSize: 12,
        title:"sasd",
        scaleShowGridLines: true,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: true,
        bezierCurve: false,
        bezierCurveTension: 0.4,
        pointDot: true,
        pointDotRadius: 4,
        pointDotStrokeWidth: 1,
        pointHitDetectionRadius: 20,
        datasetStroke: true,
        datasetStrokeWidth: 2,
        datasetFill: true,
        scaleFontFamily: "'微软雅黑'",
        scaleFontSize: 19

    };


    var chartLine = null;
    window.onload = function () {
        var ctx = document.getElementById("myChart").getContext("2d");
        chartLine = new Chart(ctx).Line(data,options);

        initEvent(chartLine, clickCall);
    }

    function clickCall(evt) {
        var point = chartLine.getPointSingleAtEvent(evt);

        if (point !== null)
            alert(point.label + ": " + point.lineItemName + " ____ " + point.value);
    }

    function initEvent(chart, handler) {
        var method = handler;
        var eventType = "click";
        var node = chart.chart.canvas;

        if (node.addEventListener) {
            node.addEventListener(eventType, method);
        } else if (node.attachEvent) {
            node.attachEvent("on" + eventType, method);
        } else {
            node["on" + eventType] = method;
        }
    }
</script>

</asp:Content>

